import '../../css/Welcome.css'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
import { useEffect, useState, } from 'react';
import { useNavigate } from 'react-router-dom';
import ReactEcharts from 'echarts-for-react';
import ReactEcharts2 from 'echarts-for-react';
import { getIndex } from "@/api/index1";
import { getIndex2 } from "@/api/index1";
import { getIndexSole } from "@/api/index1";


interface props1 {
  orderTotal: number
  payMoney: number
  payMoneyW: number
  payMoneyY: number

}
interface props2 {
  newUser: number
  newUserM: number
  newUserY: number
  vipTotal: number
}
interface props3 {
  goodsTotal: number
  inventory: number
  listed: number
  noListed: number
}
interface props4 {
  noPayment: number
  noReplacement: number
  noShipments: number
  payment: number
  pendingReturn: number
  shipments: number
}
interface props5 {
  orderM: number
  orderW: number
  toLastMonth: number
  toLastWeek: number
}
interface props6 {
  orderM: number
  orderW: number
  toLastMonth: number
  toLastWeek: number
}
interface props7 {
  orderNum: number
  time: string
}




const Notice = () => {

  const [indexTotal, setIndexTotal] = useState<props1>()
  const [indexTotal2, setIndexTotal2] = useState<props2>()
  const [indexTotal3, setIndexTotal3] = useState<props3>()
  const [indexTotal4, setIndexTotal4] = useState<props4>()
  const [indexCompare, setIndexCompare] = useState<props5>()
  const [indexNextCompare, setIndexNextCompare] = useState<props6>()
  const [indexTime, setIndexTime] = useState<props7>()
  const [indexOrderNum, setIndexOrderNum] = useState<any>()
  const [indexTime2, setIndexTime2] = useState<any>()
  const [indexOrderNum2, setIndexOrderNum2] = useState<any>()

  useEffect(() => {

    getIndexPage()
    getIndexPage2()
    getIndexSolePage()


  }, [])


  function getIndexPage() {
    getIndex({
    }).then(res => {
      console.log('获取首页数据', res);
      setIndexTotal(res.data.systemHome)
      setIndexTotal2(res.data.userView)
      setIndexTotal3(res.data.productView)
      setIndexTotal4(res.data.pending)
    }).catch(err => {
      console.log('获取首页数据', err);
    })
  }
  function getIndexPage2() {
    getIndex2({
      endTime: "2023-03-06",
      startTime: "2023-02-25",
    }).then(res => {
      console.log('获取首页统计数据', res);
      setIndexCompare(res.data.compare)
      const time = res.data.total.map((item: { time: any; }) => { return item.time })
      setIndexTime(time)
      const sole = res.data.total.map((item: { orderNum: any; }) => { return item.orderNum })
      setIndexOrderNum(sole)
      // console.log('111111', sole);s
    }).catch(err => {
      console.log('获取首页统计数据', err);
    })
  }
  function getIndexSolePage() {
    getIndexSole({
      endTime: "2023-03-06",
      startTime: "2023-02-15",
    }).then(res => {
      console.log('获取首页统计销售额数据', res);
      setIndexNextCompare(res.data.nextCompare)
      const time = res.data.nextTotal.map((item: { time: any; }) => item.time)
      setIndexTime2(time)
      const sole = res.data.nextTotal.map((item: { orderNum: any; }) => item.orderNum)
      setIndexOrderNum2(sole)
    }).catch(err => {
      console.log('获取首页统计销售额数据', err);
    })
  }



  const option = {
    title: {
      text: '订单统计',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#33ccff',
        },
      },
    },
    legend: {
      data: ['今日', '本周',],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: indexTime,
      },
    ],
    yAxis: [
      {
        type: 'value',

      },
    ],
    series: [
      {
        name: '今日',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: indexOrderNum,
      },
      {
        name: '本周',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: indexOrderNum,
      }
    ],
  }

  const option2 = {
    title: {
      text: '销售额统计',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#33ccff',
        },
      },
    },
    legend: {
      data: ['本周', '今日',],
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: indexTime2,
      },
    ],
    yAxis: [
      {
        type: 'value',

      },
    ],
    series: [

      {
        name: '本周',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: indexOrderNum2,
      },
      {
        name: '今日',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series',
        },
        data: indexOrderNum2,
      }
    ],
  }





  //跳转部分
  const navigator = useNavigate()
  const testA = () => {
    navigator('/home/index/accountsetting')
  }
  const testB = () => {
    navigator('/home/order/orderList')
  }
  const testC = () => {
    navigator('/home/user/userlist')
  }
  const testD = () => {
    navigator('/home/promotion/promotionma')
  }
  const testE = () => {
    navigator('/home/operations/operationSlide')
  }


  return (
    <div className="Notice">
      <div className="Not4">
        <div className="Not4-1">
          <div>
            <img
              src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
              alt=""
            />
          </div>
          <div>
            <p>今日订单总数 </p>
            <br />
            <p> {indexTotal?.orderTotal}</p>
          </div>
        </div>
        <div className="Not4-1">
          <div>
            <img
              src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
              alt=""
            />
          </div>
          <div>
            <p>今日销售总额</p>
            <br />
            <p> {indexTotal?.payMoney}</p>
          </div>
        </div>
        <div className="Not4-1">
          <div>
            <img
              src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
              alt=""
            />
          </div>
          <div>
            <p>昨日销售总额</p>
            <br />
            <p> {indexTotal?.payMoneyY}</p>
          </div>
        </div>
        <div className="Not4-1">
          <div>
            <img
              src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
              alt=""
            />
          </div>
          <div>
            <p>近7天销售总额</p>
            <br />
            <p>{indexTotal?.payMoneyW}
            </p>
          </div>
        </div>
      </div>
      <div className="Not5">
        <div className="Not5-1">
          <h3>待处理事务</h3>
        </div>
        <div className="Not5-2">
          <div className="Not5-2-1">
            待付款订单<p>({indexTotal4?.noPayment})</p>
          </div>
          <div className="Not5-2-1">
            已完成订单<p>({indexTotal4?.noReplacement})</p>
          </div>
          <div className="Not5-2-1">
            待确认退货订单<p>({indexTotal4?.noShipments})</p>
          </div>
          <div className="Not5-2-1">
            待发货订单 <p>({indexTotal4?.pendingReturn})</p>
          </div>
          <div className="Not5-2-1">
            已发货订单<p>({indexTotal4?.pendingReturn})</p>
          </div>
          <div className="Not5-2-1">
            待处理换货订单<p>({indexTotal4?.shipments})</p>
          </div>
        </div>
      </div>
      <div className="Not6">
        <div className="Not6-1">
          <h3>运营快捷入口</h3>
        </div>
        <div className="Not6-2">
          <div className="Not6-2-1" onClick={testA}>
            <div className="Not6-2-1-1" >
              <img
                src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                alt=""
              />
              <br />
            </div>
            <div className="Not6-2-1-2">
              <p>添加商品</p>
            </div>
          </div>

          <div className="Not6-2-1" onClick={testB}>
            <div className="Not6-2-1-1" >
              <img
                src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                alt=""
              />
              <br />
            </div>
            <div className="Not6-2-1-2" >
              <p>订单列表</p>
            </div>
          </div>

          <div className="Not6-2-1" onClick={testC}>
            <div className="Not6-2-1-1">
              <img
                src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                alt=""
              />
              <br />
            </div>
            <div className="Not6-2-1-2">
              <p>用户管理</p>
            </div>
          </div>

          <div className="Not6-2-1" onClick={testD}>
            <div className="Not6-2-1-1">
              <img
                src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                alt=""
              />
              <br />
            </div>
            <div className="Not6-2-1-2">
              <p>轮播管理</p>
            </div>
          </div>

          <div className="Not6-2-1">
            <div className="Not6-2-1-1" onClick={testE}>
              <img
                src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEab5.img"
                alt=""
              />
              <br />
            </div>
            <div className="Not6-2-1-2">
              <p>促销管理</p>
            </div>
          </div>
        </div>
      </div>
      <div className="Not1">
        <div className="Not1-1">
          <div className="Not1-2">
            <h3>数据总览</h3>
          </div>
          <div className="Not1-3">
            <div className="Not1-3-1">
              <p>{indexTotal3?.listed}</p>
              <p>已上架</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal3?.noListed}</p>
              <p>已下架</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal3?.inventory}</p>
              <p>库存紧张</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal3?.goodsTotal}</p>
              <p>全部商品</p>
            </div>
          </div>
        </div>
        <div className="Not1-1">
          <div className="Not1-2">
            <h3>用户总览</h3>
          </div>
          <div className="Not1-3">
            <div className="Not1-3-1">
              <p>{indexTotal2?.newUser}</p>
              <p>新增用户</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal2?.newUserM}</p>
              <p>昨日新增</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal2?.newUserY}</p>
              <p>本月新增</p>
            </div>
            <div className="Not1-3-1">
              <p>{indexTotal2?.vipTotal}</p>
              <p>会员总数</p>
            </div>
          </div>
        </div>
      </div>
      <div className="Not2">
        <div className="Not2-1">
          <h3>订单统计</h3>
        </div>
        <div className="Not2-3">
          <div className="Not2-left">
            <div className="Not2-left-top">
              <p>本月订单总数</p>
              <h4>{indexCompare?.orderM}</h4>
              <p>

                <span>
                  <CaretUpOutlined
                    style={{ fontSize: '16px', color: '#33ccff' }}
                  />
                  {indexCompare?.toLastMonth}%
                </span>
                同比上月
              </p>
            </div>

            <div className="Not2-left-bottom">
              <p>本周订单总数</p>
              <h4>{indexCompare?.orderW}</h4>
              <p>
                <span>
                  <CaretDownOutlined
                    style={{ fontSize: '16px', color: '#ff0000' }}
                  />
                  {indexCompare?.toLastWeek}%
                </span>
                同比上周
              </p>
            </div>
          </div>
          <ReactEcharts className="Not2-2" option={option} />
        </div>
      </div>
      <div className="Not2">
        <div className="Not2-1">
          <h3>销售额统计</h3>
        </div>
        <div className="Not2-3">
          <div className="Not2-left">
            <div className="Not2-left-top">
              <p>本月销售额</p>
              <h4>{indexNextCompare?.orderM}</h4>
              <p>

                <span>
                  <CaretUpOutlined
                    style={{ fontSize: '16px', color: '#33ccff' }}
                  />
                  {indexNextCompare?.toLastMonth}%
                </span>
                同比上月
              </p>
            </div>

            <div className="Not2-left-bottom">
              <p>本周销售额</p>
              <h4>{indexNextCompare?.orderW}</h4>
              <p>
                <span>
                  <CaretDownOutlined
                    style={{ fontSize: '16px', color: '#ff0000' }}
                  />
                  {indexNextCompare?.toLastWeek}%
                </span>
                同比上周
              </p>
            </div>
          </div>
          <ReactEcharts2 className="Not2-2" option={option2} />
        </div>
      </div>
    </div>
  )
}
export default Notice
